﻿<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 列表 -->
      <el-col :lg="24" :xs="24">
        <!-- 搜索区域 -->
        <div class="search-container">
          <el-form :inline="true" label-width="auto">
            <el-row>
              <el-col :span="8">
                <el-form-item label="仪器编码：">
                  <el-input v-model="queryParam.filter.sensorCode" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否合格：">
                  <el-radio-group v-model="queryParam.filter.isQualified">
                    <el-radio-button label="全部" value="" />
                    <el-radio-button label="合格" :value="true" />
                    <el-radio-button label="不合格" :value="false" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否上传：">
                  <el-radio-group v-model="queryParam.filter.isUploaded">
                    <el-radio-button label="全部" value="" />
                    <el-radio-button label="已上传" :value="true" />
                    <el-radio-button label="未上传" :value="false" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="检定时间：">
                  <el-date-picker
                    v-model="queryDateRange"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="search-buttons">
                  <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
                  <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <el-card shadow="hover" class="data-table">
          <!--          <div class="data-table__toolbar">
            <div class="data-table__toolbar&#45;&#45;actions">
              <el-button type="success" icon="plus" @click="handleOpenDialog()">上传</el-button>
            </div>
          </div>-->

          <!-- 列表 -->
          <el-table
            v-loading="loading"
            border
            stripe
            :data="pageResultData.items"
            highlight-current-row
            class="data-table__content"
          >
            <el-table-column label="序号" width="60px" type="index" align="center" />
            <el-table-column label="传感器编号" align="center" prop="sensorCode" />
            <el-table-column label="传感器名称" align="center" prop="sensorName" />
            <el-table-column label="检定点" align="center" prop="pointsStr" />
            <el-table-column label="合格状态" align="center" prop="isQualified">
              <template #default="scope">
                {{ scope.row.isQualified ? "合格" : "不合格" }}
              </template>
            </el-table-column>
            <el-table-column label="上传状态" align="center" prop="isUploaded">
              <template #default="scope">
                {{ scope.row.isUploaded ? "已上传" : "未上传" }}
              </template>
            </el-table-column>
            <el-table-column label="检定时间" align="center" prop="createTime" />
            <el-table-column label="操作" align="center" fixed="right">
              <template #default="scope">
                <el-button
                  type="primary"
                  icon="document"
                  link
                  size="small"
                  @click="handleOpenDialog(scope.row.id)"
                >
                  详情
                </el-button>
                <el-button
                  type="primary"
                  icon="upload"
                  link
                  size="small"
                  @click="handleOpenDialog()"
                >
                  上传
                </el-button>
                <el-popconfirm title="是否删除当前检测记录？" @confirm="handleDelete(scope.row.id)">
                  <template #reference>
                    <el-button type="danger" icon="delete" link size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!-- 列表 end -->

          <!-- 分页 -->
          <el-pagination
            v-model:current-page="queryParam.pageNumber"
            v-model:page-size="queryParam.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageResultData.totalCount"
            @size-change="handleQuery"
            @current-change="handleQuery"
          />
          <!-- 分页 end -->
        </el-card>
      </el-col>
    </el-row>

    <!-- 配置详情弹窗 -->
    <el-dialog v-model="dialogDetailVisible" width="1000" :title="dialogTitle">
      <RecordDetailView :record-id="dialogDetailId" />
    </el-dialog>
    <!-- 配置详情弹窗 End -->
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import recordApi from "@/api/business/record.api";
import type { pageParam, pageRecordFilter, pageResult } from "@/types/business/pageParam";
import { detectRecordDetail } from "@/types/business/record";
import RecordDetailView from "@/views/business/record/components/RecordDetailView.vue";

const loading = ref(false);
// 查询参数
const queryParam = ref<pageParam<pageRecordFilter>>({
  pageNumber: 1,
  pageSize: 10,
  filter: {
    sensorCode: undefined,
    isQualified: "",
    isUploaded: "",
    startDate: undefined,
    endDate: undefined,
  },
});
const queryDateRange = ref([]);

// 查询结果
const pageResultData = ref<pageResult<detectRecordDetail>>({
  totalCount: 0,
  items: [],
});

const dialogTitle = ref("");

onMounted(() => {
  handleQuery();
});

// 查询方法
function handleQuery() {
  loading.value = true;
  if (queryDateRange.value) {
    queryParam.value.filter.startDate = queryDateRange.value[0];
    queryParam.value.filter.endDate = queryDateRange.value[1];
  }

  recordApi.getPage(queryParam.value).then((data) => {
    pageResultData.value = data;
  });

  loading.value = false;
}
function handleResetQuery() {
  queryDateRange.value = [];

  queryParam.value.filter.sensorCode = undefined;
  queryParam.value.filter.startDate = undefined;
  queryParam.value.filter.endDate = undefined;
  queryParam.value.filter.isQualified = "";
  queryParam.value.filter.isUploaded = "";
  handleQuery();
}

function handleDelete(id: number) {
  recordApi.delete(id).then(() => {
    ElMessage.success("删除成功");
    handleQuery();
  });
}

const dialogDetailVisible = ref(false);
const dialogDetailId = ref(0);
function handleOpenDialog(id: number) {
  dialogDetailId.value = id;
  dialogDetailVisible.value = true;
}

function handleCloseDialog(refresh: boolean) {
  dialogDetailVisible.value = false;
  if (refresh) handleQuery();
}
</script>

<style scoped lang="scss"></style>
